<script setup lang="ts">
import type { BackgroundProps } from '@/types';

import {
  type ComponentInternalInstance,
  computed,
  getCurrentInstance,
} from 'vue';

import defaultBg from '@/assets/img/background/bg1.jpg';
import { useAppStore } from '@/store';

defineOptions({
  name: 'Bg',
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const appStore = useAppStore();
const backgrounds = proxy?.$config.setting.background as BackgroundProps[];

const bg = computed(() => {
  const bgName = appStore.setting.background;
  return backgrounds.find((bg) => bg.name === bgName)?.large || defaultBg;
});
</script>

<template>
  <div
    :style="{
      backgroundImage: `url(${bg})`,
      objectFit: 'cover',
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
    }"
    class="bg"
  ></div>
</template>
<style scoped lang="scss">
.bg {
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
</style>
